<template>
    <div class="student-home">
        <section class="results-section">
            <h3>委托借阅记录</h3>

            <el-row gutter="20">
                <el-col v-for="(record, index) in entrustmentRecords" :key="index" :span="4">
                    <el-card shadow="hover" class="result-card">
                        <template #header>
                            <div class="card-header">
                                <div class="card-header">
                                    <span style="margin-right: 10px;">{{ record.journal_name }}</span>
                                    <el-button v-if="record.status === 'pending'" size="small" type="danger"
                                        @click="cancelEntrustment(record.entrustment_id)">
                                        取消委托
                                    </el-button>
                                </div>
                                <el-tag :type="getStatusType(record.status)" disable-transitions>
                                    {{ getStatusLabel(record.status) }}
                                </el-tag>
                            </div>
                        </template>

                        <div class="entrustment-info">
                            <p><strong>当前馆藏地:</strong> {{ record.from_location }}</p>
                            <p><strong>目标馆藏地:</strong> {{ record.to_location }}</p>
                            <p><strong>申请日期:</strong> {{ record.created_at }}</p>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </section>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { entrustmentApi } from '@/request/apiService';

const entrustmentRecords = ref([]);

// 获取委托借阅记录
const fetchEntrustments = async () => {
    const { data } = await entrustmentApi.getEntrustmentList({
        page: 1,
        pageSize: 999999,
    });
    entrustmentRecords.value = data;
};

// 获取状态的中文显示
const getStatusLabel = (status) => ({
    pending: '待处理',
    approved: '已批准',
    rejected: '已拒绝',
    cancelled: '已取消',
}[status] || status);

// 获取状态的tag颜色
const getStatusType = (status) => ({
    pending: 'warning',
    approved: 'success',
    rejected: 'danger',
    cancelled: 'info',
}[status] || 'default');

// 取消委托操作
const cancelEntrustment = async (entrustment_id) => {
    try {
        await entrustmentApi.deleteEntrustmentStatus({ entrustment_id });
        fetchEntrustments(); // 重新加载数据
    } catch (error) {
        console.error('取消委托失败:', error);
    }
};

// 初始化加载委托借阅记录
onMounted(fetchEntrustments);
</script>

<style scoped>
.student-home {
    font-family: Arial, sans-serif;
}

.results-section {
    margin-top: 20px;
}

.result-card {
    margin-bottom: 15px;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
}

.entrustment-info {
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
}

.entrustment-info p {
    margin: 5px 0;
}

.entrustment-info strong {
    color: #333;
}
</style>
